<template>
  <div class="list ui-center">
    <div class="item ui-flex align-center" v-for="item in list" :key="item.id" @click="Todetail(item.id)">
      <div class="title flex-1 ui-oneline">{{ item.title }}</div>
      <div class="date">{{ item.createTime }}</div>
      <i class="icon"></i>
    </div>
  </div>
  <div class="page-box ui-flex justify-center">
    <div class="item" @click="JumpPage('first')">首页</div>
    <div class="item" @click="JumpPage('-1')">上一页</div>
    <div class="item">第{{ page + 1 }}/{{ totalPage }}页</div>
    <div class="item" @click="JumpPage('1')">下一页</div>
    <div class="item" @click="JumpPage('last')">尾页</div>
  </div>
</template>

<script setup>
const {get, router} = inject('global');

let list = ref([]),
    page = ref(0),
    pageSize = ref(12),
    totalPage = ref(0),
    loading = ref(false),
    noMore = ref(false);

/**
 * 调用列表接口获取数据
 * @constructor
 */
const GetData = () => {
  loading.value = true;
  get('/knowledge', {page: page.value, size: pageSize.value, ext: {type: 'news'}})
      .then(res => {
        loading.value = false;
        if (!res.content.length) {
          noMore.value = true;
          return;
        }
        list.value = res.content;

        // 计算总页数
        totalPage.value = Math.ceil(res['totalElements'] / pageSize.value);

      })
      .catch(() => {
        loading.value = false;
      });
};

const JumpPage = (control) => {
  if (control === 'first') {
    page.value = 0;
  } else if (control === 'last') {
    page.value = totalPage.value - 1;
  } else if (control === '-1') {
    if (page.value <= 0) {
      return;
    }
    page.value += parseInt(control);
  } else if (control === '1') {
    if (page.value >= totalPage.value - 1) {
      return;
    }
    page.value += parseInt(control);
  } else {
    return;
  }

  if (page.value < 0) {
    page.value = 0;
  }

  GetData();
};

const Todetail = (id) => {
  router.push(`/listNewsDetail?id=${id}`);
};

onMounted(() => {
  GetData();
});

</script>

<style lang="scss" scoped>
.list {
  padding: 70px 0 0 0;

  .item {
    font-size: 16px;
    color: #3d3d3d;
    line-height: 22px;
    cursor: pointer;

    .title {
      min-width: 0;
      padding: 19.5px 0;
    }

    .date {
      padding: 19.5px 0 19.5px 10px;
    }

    .icon {
      width: 120px;
      height: 61px;
      @include bgImg('@/assets/list/arrow.png');
    }
  }
}

.page-box {
  margin-top: 50px;

  .item {
    cursor: pointer;
    margin: 0 10px 0 0;
    font-size: 14px;
    color: #9e9e9e;
    line-height: 20px;
    padding: 10px 20px;
    border: 1px solid #dddddd;

    &:last-child {
      margin: 0;
    }
  }
}
</style>
